/* =====================================================================
   VIDÉO DE PRÉSENTATION DU LYCÉE (accueil + page À propos)
   Classes préfixées "vp-" : aucun style existant n'est modifié.
   ===================================================================== */
.vp-section { padding: clamp(56px, 7vw, 90px) 6% !important; }
.vp-card {
    width: min(1000px, 100%); margin: 0 auto; display: grid; grid-template-columns: auto 1fr; gap: clamp(1.4rem, 4vw, 3rem);
    align-items: center; padding: clamp(1.2rem, 3vw, 2rem); border-radius: 20px;
    background: var(--card-bg, rgba(10, 17, 114, .7)); border: 1px solid var(--border-color, rgba(255, 215, 0, .15));
    box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
}
body.light-mode .vp-card { background: #fff; border-color: rgba(10, 17, 114, .12); box-shadow: 0 18px 44px rgba(10, 17, 114, .1); }

/* Vignette verticale */
.vp-thumb {
    position: relative; width: clamp(150px, 22vw, 220px); aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden;
    padding: 0; border: 0; cursor: pointer; background: #000; display: block;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .4); transition: transform .3s ease;
}
.vp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.vp-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.55)); }
.vp-thumb:hover { transform: translateY(-4px); }
.vp-thumb:hover img { transform: scale(1.05); }
.vp-thumb:focus-visible { outline: 3px solid #f4c542; outline-offset: 4px; }
.vp-play {
    position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%; z-index: 2;
    display: grid; place-items: center; background: rgba(0, 0, 0, .55); color: #fff; border: 2px solid rgba(255,255,255,.85);
    transition: background .25s ease, transform .25s ease, border-color .25s ease;
}
.vp-play svg { width: 26px; height: 26px; margin-left: 4px; }
.vp-thumb:hover .vp-play { background: #FFD700; color: #0A1172; border-color: #FFD700; transform: scale(1.08); }
.vp-duration {
    position: absolute; right: 8px; bottom: 8px; z-index: 2; padding: 2px 7px; border-radius: 5px;
    background: rgba(0, 0, 0, .8); color: #fff; font-size: .78rem; font-weight: 600; font-variant-numeric: tabular-nums;
}

/* Texte */
.vp-eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #FFD700; }
body.light-mode .vp-eyebrow { color: #8a6500; }
.vp-title { font-family: var(--font-heading, 'Playfair Display', serif); font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin: .4rem 0 .8rem; color: var(--text-primary, #fff); line-height: 1.2; }
body.light-mode .vp-title { color: #0A1172; }
.vp-text { color: var(--text-secondary, #e0e0e0); line-height: 1.75; margin: 0 0 1.4rem; max-width: 560px; }
body.light-mode .vp-text { color: #333; }
.vp-btn {
    display: inline-flex; align-items: center; gap: .6rem; padding: .8rem 1.5rem; border-radius: 999px; cursor: pointer;
    border: 2px solid #FFD700; background: #FFD700; color: #0A1172; font-weight: 700; font-size: .95rem; font-family: inherit;
    transition: transform .25s ease, box-shadow .25s ease;
}
.vp-btn svg { width: 16px; height: 16px; }
.vp-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(255, 215, 0, .3); }
.vp-btn:focus-visible { outline: 3px solid rgba(255, 215, 0, .5); outline-offset: 3px; }
body.light-mode .vp-btn { background: #0A1172; border-color: #0A1172; color: #fff; }
.vp-meta { display: inline-block; margin-left: .8rem; font-size: .88rem; color: var(--text-tertiary, #b0b0b0); }
body.light-mode .vp-meta { color: #555; }

/* Fenêtre de lecture (vidéo verticale) */
.vp-modal { position: fixed; inset: 0; z-index: 3200; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(3, 5, 30, .93); }
.vp-modal.is-open { display: flex; }
.vp-modal__box { position: relative; height: min(86vh, 900px); aspect-ratio: 9 / 16; max-width: 100%; }
.vp-modal__box video { width: 100%; height: 100%; object-fit: contain; background: #000; border-radius: 14px; box-shadow: 0 24px 70px rgba(0, 0, 0, .6); display: block; }
.vp-modal__close {
    position: absolute; top: 0; right: -58px; width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
    border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .08); color: #fff; display: grid; place-items: center;
}
.vp-modal__close svg { width: 20px; height: 20px; }
.vp-modal__close:hover, .vp-modal__close:focus-visible { background: #FFD700; color: #0A1172; }

@media (max-width: 700px) {
    .vp-card { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .vp-text { margin-left: auto; margin-right: auto; }
    .vp-meta { display: block; margin: .7rem 0 0; }
    .vp-modal__box { height: auto; width: min(100%, calc((100vh - 90px) * 9 / 16)); }
    .vp-modal__close { top: -54px; right: 0; }
}
@media (prefers-reduced-motion: reduce) { .vp-thumb, .vp-thumb img, .vp-play { transition: none; } }